/* eslint no-alert: 0 */

'use strict';

//
// Here is how to define your module
// has dependent on mobile-angular-ui
//
var app = angular.module('MobileAngularUiExamples', [
  'ngRoute',
  'mobile-angular-ui',

  // touch/drag feature: this is from 'mobile-angular-ui.gestures.js'.
  // This is intended to provide a flexible, integrated and and
  // easy to use alternative to other 3rd party libs like hammer.js, with the
  // final pourpose to integrate gestures into default ui interactions like
  // opening sidebars, turning switches on/off ..
  'mobile-angular-ui.gestures',
  'ngVideo',
  'mobile-angular-ui.core.sharedState'
]);

app.run(function($transform) {
  window.$transform = $transform;
});

//
// You can configure ngRoute as always, but to take advantage of SharedState location
// feature (i.e. close sidebar on backbutton) you should setup 'reloadOnSearch: false'
// in order to avoid unwanted routing.
//
app.config(function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'demo/home.html',
    reloadOnSearch: false
  });
  $routeProvider.when('/live', {
    templateUrl: 'demo/live.html',
    reloadOnSearch: false
  });
  $routeProvider.when('/rank', {
    templateUrl: 'demo/rank.html',
    reloadOnSearch: false
  });
  $routeProvider.when('/match', {
    templateUrl: 'demo/match.html',
    reloadOnSearch: false
  });
});

//
// `$touch example`
//

app.directive('toucharea', ['$touch', function($touch) {
  // Runs during compile
  return {
    restrict: 'C',
    link: function($scope, elem) {
      $scope.touch = null;
      $touch.bind(elem, {
        start: function(touch) {
          $scope.containerRect = elem[0].getBoundingClientRect();
          $scope.touch = touch;
          $scope.$apply();
        },

        cancel: function(touch) {
          $scope.touch = touch;
          $scope.$apply();
        },

        move: function(touch) {
          $scope.touch = touch;
          $scope.$apply();
        },

        end: function(touch) {
          $scope.touch = touch;
          $scope.$apply();
        }
      });
    }
  };
}]);

//
// `$drag` example: drag to dismiss
//
app.directive('dragToDismiss', function($drag, $parse, $timeout) {
  return {
    restrict: 'A',
    compile: function(elem, attrs) {
      var dismissFn = $parse(attrs.dragToDismiss);
      return function(scope, elem) {
        var dismiss = false;

        $drag.bind(elem, {
          transform: $drag.TRANSLATE_RIGHT,
          move: function(drag) {
            if (drag.distanceX >= drag.rect.width / 4) {
              dismiss = true;
              elem.addClass('dismiss');
            } else {
              dismiss = false;
              elem.removeClass('dismiss');
            }
          },
          cancel: function() {
            elem.removeClass('dismiss');
          },
          end: function(drag) {
            if (dismiss) {
              elem.addClass('dismitted');
              $timeout(function() {
                scope.$apply(function() {
                  dismissFn(scope);
                });
              }, 300);
            } else {
              drag.reset();
            }
          }
        });
      };
    }
  };
});

//
// Another `$drag` usage example: this is how you could create
// a touch enabled "deck of cards" carousel. See `carousel.html` for markup.
//
app.directive('carousel', function() {
  return {
    restrict: 'C',
    scope: {},
    controller: function() {
      this.itemCount = 0;
      this.activeItem = null;

      this.addItem = function() {
        var newId = this.itemCount++;
        this.activeItem = this.itemCount === 1 ? newId : this.activeItem;
        return newId;
      };

      this.next = function() {
        this.activeItem = this.activeItem || 0;
        this.activeItem = this.activeItem === this.itemCount - 1 ? 0 : this.activeItem + 1;
      };

      this.prev = function() {
        this.activeItem = this.activeItem || 0;
        this.activeItem = this.activeItem === 0 ? this.itemCount - 1 : this.activeItem - 1;
      };
    }
  };
});

app.directive('carouselItem', function($drag) {
  return {
    restrict: 'C',
    require: '^carousel',
    scope: {},
    transclude: true,
    template: '<div class="item"><div ng-transclude></div></div>',
    link: function(scope, elem, attrs, carousel) {
      scope.carousel = carousel;
      var id = carousel.addItem();

      var zIndex = function() {
        var res = 0;
        if (id === carousel.activeItem) {
          res = 2000;
        } else if (carousel.activeItem < id) {
          res = 2000 - (id - carousel.activeItem);
        } else {
          res = 2000 - (carousel.itemCount - 1 - carousel.activeItem + id);
        }
        return res;
      };

      scope.$watch(function() {
        return carousel.activeItem;
      }, function() {
        elem[0].style.zIndex = zIndex();
      });

      $drag.bind(elem, {
        //
        // This is an example of custom transform function
        //
        transform: function(element, transform, touch) {
          //
          // use translate both as basis for the new transform:
          //
          var t = $drag.TRANSLATE_BOTH(element, transform, touch);

          //
          // Add rotation:
          //
          var Dx = touch.distanceX;
          var t0 = touch.startTransform;
          var sign = Dx < 0 ? -1 : 1;
          var angle = sign * Math.min((Math.abs(Dx) / 700) * 30, 30);

          t.rotateZ = angle + (Math.round(t0.rotateZ));

          return t;
        },
        move: function(drag) {
          if (Math.abs(drag.distanceX) >= drag.rect.width / 4) {
            elem.addClass('dismiss');
          } else {
            elem.removeClass('dismiss');
          }
        },
        cancel: function() {
          elem.removeClass('dismiss');
        },
        end: function(drag) {
          elem.removeClass('dismiss');
          if (Math.abs(drag.distanceX) >= drag.rect.width / 4) {
            scope.$apply(function() {
              carousel.next();
            });
          }
          drag.reset();
        }
      });
    }
  };
});

app.directive('dragMe', ['$drag', function($drag) {
  return {
    controller: function($scope, $element) {
      $drag.bind($element, {
        //
        // Here you can see how to limit movement
        // to an element
        //
        transform: $drag.TRANSLATE_INSIDE($element.parent()),
        end: function(drag) {
          // go back to initial position
          drag.reset();
        }
      }, { // release touch when movement is outside bounduaries
        sensitiveArea: $element.parent()
      });
    }
  };
}]);

//
// For this trivial demo we have just a unique MainController
// for everything
//
app.controller('MainController', function($rootScope, $scope) {

  $scope.swiped = function(direction) {
    alert('Swiped ' + direction);
  };

  // User agent displayed in home page
  $scope.userAgent = navigator.userAgent;

  // Needed for the loading screen
  $rootScope.$on('$routeChangeStart', function() {
    $rootScope.loading = true;
  });

  $rootScope.$on('$routeChangeSuccess', function() {
    $rootScope.loading = false;
  });

  // Fake text i used here and there.
  $scope.lorem = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. ' +
    'Vel explicabo, aliquid eaque soluta nihil eligendi adipisci error, illum ' +
    'corrupti nam fuga omnis quod quaerat mollitia expedita impedit dolores ipsam. Obcaecati.';

  //
  // 'Scroll' screen
  //
  var scrollItems = [];

  for (var i = 1; i <= 100; i++) {
    scrollItems.push('Item ' + i);
  }

  $scope.scrollItems = scrollItems;

  $scope.bottomReached = function() {
    alert('Congrats you scrolled to the end of the list!');
  };

  //
  // Right Sidebar
  //
  $scope.chatUsers = [{
    name: 'Carlos  Flowers',
    online: true
  }, {
    name: 'Byron Taylor',
    online: true
  }, {
    name: 'Jana  Terry',
    online: true
  }, {
    name: 'Darryl  Stone',
    online: true
  }, {
    name: 'Fannie  Carlson',
    online: true
  }, {
    name: 'Holly Nguyen',
    online: true
  }, {
    name: 'Bill  Chavez',
    online: true
  }, {
    name: 'Veronica  Maxwell',
    online: true
  }, {
    name: 'Jessica Webster',
    online: true
  }, {
    name: 'Jackie  Barton',
    online: true
  }, {
    name: 'Crystal Drake',
    online: false
  }, {
    name: 'Milton  Dean',
    online: false
  }, {
    name: 'Joann Johnston',
    online: false
  }, {
    name: 'Cora  Vaughn',
    online: false
  }, {
    name: 'Nina  Briggs',
    online: false
  }, {
    name: 'Casey Turner',
    online: false
  }, {
    name: 'Jimmie  Wilson',
    online: false
  }, {
    name: 'Nathaniel Steele',
    online: false
  }, {
    name: 'Aubrey  Cole',
    online: false
  }, {
    name: 'Donnie  Summers',
    online: false
  }, {
    name: 'Kate  Myers',
    online: false
  }, {
    name: 'Priscilla Hawkins',
    online: false
  }, {
    name: 'Joe Barker',
    online: false
  }, {
    name: 'Lee Norman',
    online: false
  }, {
    name: 'Ebony Rice',
    online: false
  }];

  //
  // 'Forms' screen
  //
  $scope.rememberMe = true;
  $scope.email = 'me@example.com';

  $scope.login = function() {
    alert('You submitted the login form');
  };

  //
  // 'Drag' screen
  //
  $scope.notices = [];

  for (var j = 0; j < 10; j++) {
    $scope.notices.push({
      icon: 'envelope',
      message: 'Notice ' + (j + 1)
    });
  }

  $scope.deleteNotice = function(notice) {
    var index = $scope.notices.indexOf(notice);
    if (index > -1) {
      $scope.notices.splice(index, 1);
    }
  };
  $rootScope.currentTab = 1;
  $rootScope.updateTab = function(index) {
    $rootScope.currentTab = index;
  };

  $rootScope.currentTab1 = 1;
  $rootScope.updateTab1 = function(index) {
    $rootScope.currentTab1 = index;
  };

  $rootScope.currentTab2 = 1;
  $rootScope.updateTab2 = function(index) {
    $rootScope.currentTab2 = index;
    $rootScope.$broadcast('tabUpdate');
  };

  $scope.showToggles = 0;
});

app.controller('RegistersController', function($rootScope, $scope,$http) {
  $scope.registerImages = ['images/registers00.png', 'images/registers10.jpg'];
  $scope.matchImages = ['images/match10.png', 'images/match00.png'];
  //$scope.registerImage = $scope.registerImages[$rootScope.currentTab];
   $scope.myObj = {
     id: '01',
     username : '汪晋'
   };
  $http.get('demo/data.json').success(
    function(data){
      $scope.number = data.numArr;
    }
  );
});

app.controller('VideoController', function($rootScope, $scope, video) {
  /**
   * @property videos
   * @type {Object}
   */
  $scope.videos = [
    'http://ggqsmbd8v8apgutqm2b.exp.bcelive.com/lss-ginr2n9cbug94ned/live.m3u8',
    'http://ggqsmbd8v8apgutqm2b.exp.bcelive.com/lss-ginr8vbgruiyay4d/live.m3u8',
    'http://ggqsmbd8v8apgutqm2b.exp.bcelive.com/lss-giptis078kredi82/live.m3u8',
    'http://ggqsmbd8v8apgutqm2b.exp.bcelive.com/lss-ginrq01q0xwua95i/live.m3u8',
    'http://ggqsmbd8v8apgutqm2b.exp.bcelive.com/lss-ginri8sefrb53x99/live.m3u8',
    'http://ggqsmbd8v8apgutqm2b.exp.bcelive.com/lss-giptis078kredi82/live.m3u8'
  ];

  $scope.currentVideo = 0;

  $scope.next = function() {
    $scope.currentVideo = ($scope.currentVideo + 1) % 3;
    video.addSource('application/x-mpegURL', $scope.videos[$rootScope.currentTab2 * 3 + $scope.currentVideo], true);
  };

  // Add some video sources for the player!
  video.addSource('application/x-mpegURL', $scope.videos[3]);

  $scope.$on('tabUpdate', function(event, mass) {
    $scope.currentVideo = $rootScope.currentTab2 * 3;
    video.addSource('application/x-mpegURL', $scope.videos[$scope.currentVideo], true);
  });
});